<template>
  <div class>
    <el-card class="form">
      <el-form inline :model="searchForm" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="searchForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="medium" type="primary" @click="init">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-table stripe :data="tableData" @selection-change="selectionChange" border style="width: 100%">
      <el-table-column type="selection" fixed="left" align="center"></el-table-column>
      <el-table-column type="index" fixed="left" align="center"></el-table-column>
      <el-table-column prop="username" fixed="left" align="center" label="用户名"></el-table-column>
      <el-table-column prop="realName" fixed="left" align="center" label="真实姓名"></el-table-column>
      <!-- <el-table-column :formatter="userTypeFilter" prop="usertype" align="center" label="用户类型"></el-table-column> -->
      <el-table-column prop="mobile" align="center" label="手机号码"></el-table-column>
      <el-table-column prop="telephone" align="center" label="电话号码"></el-table-column>
      <el-table-column prop="email" align="center" label="电子邮箱"></el-table-column>
    </el-table>
    <el-card style="text-align:right;">
      <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="currentPage"
        :page-sizes="[ 10, 20,30, 40]" :page-size="pageSize" background layout="total, sizes, prev, pager, next"
        :total="total"></el-pagination>
    </el-card>
  </div>
</template>

<script>
  // import {filterUsertype} from "@/filters/usersFilter"
  import { getList } from "@/pages/auth/yhgl/function";
  export default {
    props: ["organId"],
    components: {},
    data() {
      return {
        // organId:this.organId,
        selections: [],
        formLabelWidth: "80px",
        tableData: [],
        searchForm: {
          username: "",
          usertype: ""
        },
        total: 0,
        pageSize: 10,
        currentPage: 1
      };
    },
    computed: {},
    mounted() {
      this.init();
    },
    methods: {
      selectionChange(v) {
        this.selections = v;
      },
      // userTypeFilter(a,b,c){
      //     return filterUsertype(c)
      // },
      sizeChange(n) {
        this.pageSize = n;
        this.init();
      },
      currentChange(n) {
        this.currentPage = n;
        this.init();
      },
      init() {
        this.selections = [];
        // console.log(this.organId);
        let params = {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          username: this.searchForm.username,
          organId: this.organId
          // usertype: this.searchForm.usertype
        };
        this.$api
          .formPost("/api/auth/sysuser/doGetUserNotInUserOrganByOrganId", params)
          .then(res => {
            if (res.retHead.code == "0000000") {
              this.tableData = res.retBody.list;
              this.total = res.retBody.total;
              this.currentPage = res.retBody.pageNum;
            } else {
              this.$message({
                type: "error",
                message: res.retHead.message
              });
            }
          });
        // getList(params).then(res => {
        //   if (res.retHead.code == "0000000") {
        //     this.tableData = res.retBody.list;
        //     this.total = res.retBody.total;
        //     this.currentPage = res.retBody.pageNum;
        //   }
        // });
      }
    },
    created() { }
  };
</script>
<style lang='scss' scoped>
  .btns {
    text-align: right;
  }
</style>